<template>
	<view class="custom-popup-container" v-if="visible">
		<view class="custom-popup-mask" @click="closePopup"></view>
		<view class="custom-popup-box">
			<view class="search-popup">
				<view class="search-input-wrapper">
					<input 
						type="text" 
						v-model="keyword" 
						:placeholder="noResults ? '无搜索结果的关键词' : '快速搜索'" 
						class="search-popup-input" 
						focus 
						@input="handleSearch"
					/>
					<view class="search-icon-wrapper">
						<image class="search-popup-icon" src="/static/index主页/search@2x.png"></image>
					</view>
				</view>
				<view class="search-hint" v-if="!keyword">
					<text class="search-hint-text">任务、标签、内容</text>
					<text class="search-hint-text">在此都可搜索。</text>
				</view>
				<view class="no-results" v-else-if="keyword && !results.length">
					<text class="no-results-text">适合安静的一天。</text>
				</view>
				<scroll-view class="search-results" scroll-y v-else>
					<view 
						class="search-result-item" 
						v-for="(item, index) in results" 
						:key="index"
						@tap="selectItem(item, index)"
					>
						<view class="circle-check small">
							<view class="circle" :class="{'checked': item.status === 1}">
								<view v-if="item.status === 1" class="checkmark">✓</view>
							</view>
						</view>
						<view class="result-content">
							<view class="result-title">
								<text v-for="(part, i) in getHighlightParts(item.userDate || item.userName)" :key="i"
									:class="{ 'highlight-keyword': part.isKeyword }">
									{{ part.text }}
								</text>
							</view>
							<view class="result-time" v-if="item.time">{{item.time}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SearchPopup",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			dataSource: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				keyword: '',
				results: [],
				noResults: false
			}
		},
		watch: {
			visible(val) {
				if(val) {
					// 重置搜索状态
					this.keyword = '';
					this.results = [];
					this.noResults = false;
				}
			}
		},
		methods: {
			closePopup() {
				this.$emit('update:visible', false);
			},
			
			handleSearch() {
				if (!this.keyword) {
					this.results = [];
					this.noResults = false;
					return;
				}
				
				const keyword = this.keyword.toLowerCase();
				this.results = this.dataSource.filter(item => {
					const title = (item.userDate || item.userName || '').toLowerCase();
					const content = (item.content || '').toLowerCase();
					
					return title.includes(keyword) || content.includes(keyword);
				});
				
				// 设置无结果标志
				this.noResults = this.results.length === 0;
			},
			
			getHighlightParts(text) {
				if (!text || !this.keyword) return [{text: text, isKeyword: false}];
				
				const keyword = this.keyword.toLowerCase();
				const parts = [];
				let lastIndex = 0;
				
				// 不区分大小写查找所有匹配项
				const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
				let match;
				
				while ((match = regex.exec(text)) !== null) {
					if (match.index > lastIndex) {
						parts.push({
							text: text.substring(lastIndex, match.index),
							isKeyword: false
						});
					}
					
					parts.push({
						text: match[0],
						isKeyword: true
					});
					
					lastIndex = match.index + match[0].length;
				}
				
				// 添加最后一部分（如果有）
				if (lastIndex < text.length) {
					parts.push({
						text: text.substring(lastIndex),
						isKeyword: false
					});
				}
				
				return parts;
			},
			
			// 转义正则表达式中的特殊字符
			escapeRegExp(string) {
				return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
			},
			
			selectItem(item, index) {
				// 查找原始数据中的索引
				const originalIndex = this.dataSource.findIndex(i => 
					(i.userDate === item.userDate || i.userName === item.userName) &&
					i.content === item.content
				);
				
				if (originalIndex !== -1) {
					// 将选中的索引传递给父组件
					this.$emit('select', originalIndex);
					// 关闭搜索弹窗
					this.closePopup();
				}
			}
		}
	}
</script>

<style scoped>
	/* 自定义弹窗样式 */
	.custom-popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.custom-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.custom-popup-box {
		width: 343px;
		height: 319px;
		position: relative;
		z-index: 1000;
		border-radius: 16px;
		overflow: hidden;
	}
	
	/* 搜索弹窗样式 */
	.search-popup {
		width: 100%;
		height: 100%;
		border-radius: 16px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	
	.search-input-wrapper {
		position: relative;
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 0 80rpx 0 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	
	.search-popup-input {
		width: 100%;
		height: 100%;
		border: none;
		background: none;
	}
	
	.search-icon-wrapper {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.search-popup-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.search-hint {
		padding: 40rpx 0;
		text-align: center;
		color: #999;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.search-hint-text {
		font-size: 28rpx;
		color: #999;
		display: block;
		line-height: 1.6;
	}
	
	.search-results {
		flex: 1;
		overflow-y: auto;
		margin-top: 10rpx;
	}
	
	.search-result-item {
		display: flex;
		align-items: center;
		padding: 20rpx 10rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.search-result-item:last-child {
		border-bottom: none;
	}
	
	.circle-check.small {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}
	
	.circle-check.small .circle {
		width: 30rpx;
		height: 30rpx;
	}
	
	.result-content {
		flex: 1;
		overflow: hidden;
	}
	
	.result-title {
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.result-time {
		font-size: 22rpx;
		color: #999;
		margin-top: 5rpx;
	}
	
	.highlight-keyword {
		color: #4080ff;
		font-weight: bold;
	}
	
	.no-results {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}
	
	.no-results-text {
		font-size: 24px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 34.75px;
		color: rgba(0, 0, 0, 0.2);
		text-align: center;
	}
	
	.circle {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.checked {
		background-color: #4080ff;
		border-color: #4080ff;
	}
	
	.checkmark {
		color: white;
		font-size: 24rpx;
	}
</style> 